The HTMLImageElement interface provides special properties and methods 聽for manipulating the layout and presentation ofelements.
EventTargetNodeElementHTMLElementHTMLImageElement a:hover text { fill: #0095DD; pointer-events: all;}PropertiesInherits properties from its parent, HTMLElement.
HTMLImageElement.alignIs a DOMString indicating the alignment of the image with respect to the surrounding context.聽The possible values are聽"left",聽"right",聽"justify", and聽"center". HTMLImageElement.alt Is a DOMString that reflects the alt HTML attribute, 聽thus indicating fallback context for the image. HTMLImageElement.borderIs a DOMString that is responsible for聽the width of the border surrounding聽the image. This is now deprecated and the CSS border property should be used instead. HTMLImageElement.complete Read onlyReturns a Boolean that is true if the browser has finished fetching the image, whether successful or not. It also shows聽true, if the image has no src value. HTMLImageElement.crossOrigin Is a DOMString representing the CORS setting for this image element. See CORS聽settings attributes for further details. HTMLImageElement.currentSrc Read onlyReturns a DOMString representing the URL to the currently displayed image (which may change, for example in response to media queries). HTMLImageElement.height Is a unsigned long that reflects the height HTML attribute, indicating the rendered height of the image in CSS聽pixels. HTMLImageElement.hspaceIs a long representing the space on either side聽of the image. HTMLImageElement.isMap Is a Boolean that reflects the ismap HTML attribute, indicating that the image is part of a server-side image map. HTMLImageElement.longDescIs a DOMString representing the URI of a long description of the image. HTMLImageElement.lowSrcIs a DOMString that聽refers聽to a low-quality (but faster to load) copy of the image. HTMLImageElement.nameIs a DOMString representing the name of the element. HTMLImageElement.naturalHeight Read onlyReturns a聽unsigned long representing the intrinsic height of the image in CSS聽pixels, if it is available; else, it shows聽0. HTMLImageElement.naturalWidth Read onlyReturns a聽unsigned long representing the intrinsic width of the image in CSS聽pixels, if it is available; otherwise, it will show聽0. HTMLImageElement.referrerPolicyIs a DOMString that reflects the referrerpolicy HTML attribute indicating which referrer to use in order to聽fetch聽the image. HTMLImageElement.src Is a DOMString that reflects the src HTML attribute, containing the full URL of the image including base URI. HTMLImageElement.sizesIs a DOMString reflecting the sizes HTML attribute. HTMLImageElement.srcsetIs a DOMString reflecting the srcset HTML attribute, containing a list of candidate images, separated by a comma (',', U+002C COMMA). A candidate image is a URL followed by a 'w' with the width of the images, or an 'x' followed by the pixel density. HTMLImageElement.useMap Is a DOMString that reflects the usemap HTML attribute, containing a partial URL of a map element. HTMLImageElement.vspaceIs a long representing the space above and below the image. HTMLImageElement.width Is a unsigned long that reflects the width HTML attribute, indicating the rendered width of the image in CSS聽pixels. HTMLImageElement.x Read onlyReturns a long representing the horizontal offset from the nearest layer. This property mimics an old Netscape 4 behavior. HTMLImageElement.y Read only Returns a long representing the vertical offset from the nearest layer. This property is also similar to behavior of聽an old Netscape 4.MethodsInherits properties from its parent, HTMLElement.
Image() The Image() constructor, taking two optional unsigned long, which are the width and the height of the resource, creates an instance of HTMLImageElement聽, not inserted in a DOM tree.ErrorsIf an error occurs while trying to load or render the image, and an onerror event handler has been configured to handle the error event, that event handler will get called. This can happen in a number of situations, including:
The src attribute is empty or null. The specified src URL is the same as the URL of the page the user is currently on. The specified image is corrupted in some way that prevents it from being loaded. The specified image's metadata is corrupted in such a way that it's impossible to retrieve its dimensions, and no dimensions were specified in theelement's attributes. The specified image is in a format not supported by the user agent.Examplevar img1 = new Image(); // HTML5 Constructorimg1.src = 'image1.png';img1.alt = 'alt';document.body.appendChild(img1);var img2 = document.createElement('img'); // use DOM HTMLImageElementimg2.src = 'image2.jpg';img2.alt = 'alt text';document.body.appendChild(img2);// using first image in the documentalert(document.images[0].src);SpecificationsSpecificationStatusCommentReferrer PolicyThe definition of 'referrer attribute' in that specification.Working DraftAdded the referrerPolicy property.CSS Object Model (CSSOM) View ModuleThe definition of 'Extensions to HTMLImageElement' in that specification.Working DraftAdded the x and y properties.WHATWG HTML Living StandardThe definition of 'HTMLImageElement' in that specification.Living StandardThe following properties have been added: srcset, currentSrc and sizes.HTML5The definition of 'HTMLImageElement' in that specification.RecommendationA constructor (with 2 optional parameters) has been added.The following properties are now obsolete: name, border, align, hspace, vspace, and longdesc.The following properties are now unsigned long, instead of long: height, and width.The following properties have been added: crossorigin, naturalWidth, naturalHeight, and complete.Document Object Model (DOM) Level 2 HTML SpecificationThe definition of 'HTMLImgElement' in that specification.RecommendationThe lowSrc property has been removed.The following properties are now long, instead of DOMString: height, width, hspace, and vspace.Document Object Model (DOM) Level 1 SpecificationThe definition of 'HTMLImgElement' in that specification.RecommendationInitial definition.Browser compatibilityDesktopMobileFeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)Basic support(Yes)(Yes)1.0 (1.7 or earlier)(Yes)(Yes)(Yes)lowSrc(Yes)(Yes)(Yes)?(Yes)(Yes)naturalWidth, naturalHeight(Yes)(Yes)(Yes)9(Yes)(Yes)crossorigin(Yes)(Yes)(Yes)9(Yes)(Yes)complete(Yes)(Yes)(Yes)5[4](Yes)(Yes)srcset 34(Yes)32 (32)[2]No聽support217.1currentSrc (Yes)(Yes)32 (32)[2]No聽support(Yes)No聽supportsizes (Yes)(Yes)33 (33)[3]No聽support(Yes)No聽supportx and y(Yes)(Yes)14[1]No聽support(Yes)(Yes)referrerPolicy 51No聽support50 (50)No聽supportNo聽supportNo聽supportonerror event handlerNo聽support?51 (51)[5]No聽support(Yes)(Yes)FeatureAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileBasic support(Yes)(Yes)(Yes)1.0 (1.0)(Yes)(Yes)(Yes)lowSrc(Yes)(Yes)(Yes)????naturalWidth, naturalHeight(Yes)(Yes)(Yes)?9?(Yes)crossorigin(Yes)(Yes)(Yes)(Yes)??(Yes)complete(Yes)(Yes)(Yes)(Yes)??(Yes)srcset 3434(Yes)32.0 (32)[2]No聽supportNo聽supportiOS 8currentSrc (Yes)(Yes)(Yes)32.0 (32)[2]No聽supportNo聽supportNo聽supportsizes (Yes)(Yes)(Yes)33.0 (33)[3]No聽supportNo聽supportNo聽supportx and y(Yes)(Yes)(Yes)14[1]No聽support(Yes)(Yes)referrerPolicy 5151No聽support50.0 (50)No聽supportNo聽supportNo聽supportonerror event handlerNo聽supportNo聽support?51.0 (51)No聽support(Yes)(Yes)[1] Though,聽these聽x and y properties were removed in Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4) but later, they were聽restored in Gecko 14.0 (Firefox 14.0 / Thunderbird 14.0 / SeaMonkey 2.11) for compatibility reasons.
[2] This feature is behind the dom.image.srcset.enabled preference, defaulting to false.
[3] This feature is behind the dom.image.picture.enabled preference, defaulting to false.
[4] IE reports false for broken images.
[5] May also be supported in earlier versions.
See also The HTML element implementing this interface: